<template>
	<uni-search-bar @confirm="toSearch" placeholder="请输入搜索的公交地铁路线" v-model="searchkey" />
	<swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
		<swiper-item v-for="(item,index) in lunboList" :key="index">
			<view class="swiper-item">
				<image style="width: 100%;" :src="item.url" mode=""></image>
			</view>
		</swiper-item>
	</swiper>

	<view class="weather" style="height: 100rpx;border: 1px solid #ccc;margin: 5px; border-radius: 5px;display: flex;justify-content: space-between; padding: 10rpx;align-items: center;
					">
		<view class="icon" style="width: 100rpx;height: 100rpx; ">
			<image style="width: 100%;height: 100%;" :src="'/static/weather/'+ weatherNow.icon +'.png'" mode=""></image>
		</view>
		<view class="text" style="font-size: 50rpx;margin-left: 10px;">
			{{weatherNow.temp}}°C
		</view>
		<view class="text" style="font-size: 34rpx;margin-left: 10rpx;">
			{{weatherNow.text}}
		</view>
		<view class="text" style=" margin-left: 10rpx;">
			{{weatherNow.windDir}} {{weatherNow.windScale}}级
		</view>
		<view>
			<view class="text" style="margin-left: 10rpx;">
				体感温度： {{weatherNow.feelsLike }}°C
			</view>
			<view class="text" style="margin-left: 10rpx;">
				湿度： {{weatherNow.humidity }}%
			</view>
		</view>
	</view>
	<uni-section title="旅游服务" sub-title="" type="line">
	</uni-section>
	<uni-grid :show-border="false" :column="6" @change="changeGrid">
		<uni-grid-item v-for="(item,index) in gridData" :index="index">
			<view class="grid-item-box" style="background-color: #fff;">
				<uni-icons :type="item.icon" :size="30" :color="item.color" />
				<text class="text">{{item.title}}</text>
			</view>
		</uni-grid-item>

	</uni-grid>




	<uni-section title="认识西安" sub-title="" type="line">

	</uni-section>
	<video style="width: 100%;" src="/static/video/1.mp4" :autoplay="true" controls></video>
	
	<uni-section title="景点" sub-title="" type="line">
	</uni-section>
	<view class="seen">
		<view class="item" v-for="(item,index) in xianscene">
			<view class="title">
				{{item.name}}
			</view>
			<view class="pic">
				<image :src="item.pic" mode=""></image>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from '../../utils/config';
	import {
		userStore
	} from "../../store/userStore.js"
	const store = userStore()

	const searchkey = ref("")

	function toSearch() {
		if (searchkey.value == "") {
			uni.showToast({
				title: "请输入查询的公交地图线路",
				icon: "none"
			})
		} else {
			window.location.href = `https://uri.amap.com/line?name=${searchkey.value}&city=029&callnative=0`
		}
	}
	onLoad(() => {
		getLunbo()
		getCurrentPos()
		getScene()
		getWeather()
	})
	// 轮播的数据
	const lunboList = ref([])
	// 获取轮播数据
	async function getLunbo() {
		let res = await uni.$get(CONFIG.leanCloud_url + "/1.1/classes/Lunbo")
		if (res.statusCode == 200) {
			lunboList.value = res.data.results
		}
		console.log(lunboList.value)
	}

	function getCurrentPos() {
		uni.getLocation({
			success: function(res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				store.setPos(res.longitude, res.latitude)
			}
		})
	}
	let searchKey = ref('')

	function searchCityBus() {
		if (!searchKey.value) {
			uni.showToast({
				title: '请输入关键字',
				icon: 'none'
			})
			return
		}
		window.location.href =
			`https://uri.amap.com/line?name=${searchKey.value}&city=029&callnative=1`
	}

	let rotateList = ref([])
	async function getLuinbo() {
		let res = await uni.$get(CONFIG.leanbase + "/1.1/classes/RotatePIc")
		if (res.statusCode == 200) {

			rotateList.value = res.data.results
		} else {
			uni.showToast({
				title: '数据获取错误',
				icon: 'none'
			})
		}
	}
	let weatherNow = ref({})
	async function getWeather() {
		let res = await uni.$get(CONFIG.hefeng_locations, weatherNow.value)
		console.log(res)
		if (res.statusCode == 200) {
			weatherNow.value = res.data.now
			console.log(res.data.now)
		}
	}
	// let weatherNow = ref({})
	// async function getWeather() {
	// 	try {
	// 		let res = await uni.$get('https://api.qweather.com/v7/weather/now');

	// 		if (res.data.success) {
	// 			weatherNow.value = {
	// 				icon: res.data.data.icon,
	// 				temp: res.data.data.temp,
	// 				text: res.data.data.text,
	// 				windDir: res.data.data.windDir,
	// 				windScale: res.data.data.windScale,
	// 				feelsLike: res.data.data.feelsLike,
	// 				humidity: res.data.data.humidity
	// 			};
	// 			console.log('Weather data:', weatherNow.value);
	// 		} else {
	// 			console.error('Failed to fetch weather data:', res.data.message);
	// 			uni.showToast({
	// 				title: '无法获取天气信息',
	// 				icon: 'none'
	// 			});
	// 		}
	// 	} catch (error) {
	// 		console.error('Error fetching weather data:', error);
	// 		uni.showToast({
	// 			title: '天气信息获取失败',
	// 			icon: 'none'
	// 		});
	// 	}
	// }
	let xianscene = ref([])
	async function getScene() {
		try {
			let res = await uni.$get(CONFIG.leanCloud_url + "/1.1/classes/XianObj");
			if (res.statusCode === 200) {
				xianscene.value = res.data.results.slice(0, 6);
				console.log('Scene data:', xianscene.value);
			} else {
				console.error('Failed to fetch scene data:', res.data);
				uni.showToast({
					title: '无法获取景点信息',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('Error fetching scene data:', error);
			uni.showToast({
				title: '景点信息获取失败',
				icon: 'none'
			});
		}
	}

	//调用默认浏览器打开
	function toweather() {
		window.location.href =
			`//uri.amap.com/navigation?from=118.115948,24.470662,我的位置&to=118.092515,24.436698终点&mode=car&policy=1&src=com.mzwu.www&callnative=1`

	}

	let gridData = [{
			title: '热映电影',
			icon: 'videocam',
			url: '/pages/movie/movie',
			color: 'orange'
		},
		{
			title: '长安八景',
			icon: 'star-filled',
			color: 'purple'
		},
		{
			title: '每日运势',
			icon: 'gift-filled',
			color: 'red'
		},
		{
			title: '天气预报',
			icon: 'image',
			color: '#be7dff'
		},
		{
			title: '景点',
			icon: 'map',
			color: '#003333'
		},
		{
			title: '古迹',
			icon: 'location',
			color: '#603066'
		},
		{
			title: '我在哪里',
			icon: 'paperplane',
			url: '/pages/transport/transport',
			color: '#336699'
		},
		{
			title: '我在哪里2',
			icon: 'shop-filled',
			color: '#55aaff'

		},
		{
			title: '公交查询',
			icon: 'search',
			color: '#FF9966'

		},
		{
			title: '自选功能',
			icon: 'star-filled',
			color: '#ffaa00'
		},
		{
			title: '自选功能',
			icon: 'list',
			color: '#333399'
		},
		{
			title: '自选功能',
			icon: 'spinner-cycle',
			color: '#b2a2ff'
		}


	]

	function changeGrid(e) {

		let url = gridData[e.detail.index].url
		if (url) {

			uni.navigateTo({
				url
			})
			console.log(e.detail.index)
		}
	}
</script>

<style lang="scss">
	.grid-item-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.text {
		font-size: 12px;
	}

	.weather {
		.text {
			color: purple;
			font-size: 28rpx;
		}
	}

	.seen {
		width: 730rpx;
		border: 1px solid #eee;

		margin: 10rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

		.item {
			width: 320rpx;
			padding: 10px;
			height: 200rpx;
			border: 1px solid #eee;
			box-shadow: 3px 3px 3px #eee;

			border-radius: 5px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
			}

			.pic {
				width: 100%;
				height: 150rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>